<template>
  <div class="rq-match-result-item">
    <div class="rq-match-result-item__label">{{ result.label }}</div>
    <div class="rq-match-result-item__value">
      <div class="team--home team">
        <div class="name" v-if="index == 0">{{ match.home_name }}</div>
        <div class="odd">
          <OddItem
            v-for="item in homeData"
            :label="item.odds_name"
            :value="item.odd"
            @click="store.selectMetchResult(item, match)"
            :active="match.match_id == state.other.match?.match_id && state.orderData.list[item.pk_odds_key]"
          />
        </div>
      </div>
      <div class="team--away team">
        <div class="name" v-if="index == 0">{{ match.away_name }}</div>
        <div class="odd">
          <OddItem
            v-for="item in awayData"
            :label="item.odds_name"
            :value="item.odd"
            @click="store.selectMetchResult(item, match)"
            :active="match.match_id == state.other.match?.match_id && state.orderData.list[item.pk_odds_key]"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import OddItem from '../OddItem.vue'

const props = defineProps({
  match: Object,
  result: Object,
  index: Number,
})

const { store, state } = inject('Sell')

const homeData = computed(() => {
  const {  result } = props

  return state.other.showAll ? result.homeData : result.homeData.slice(0, 3)
})

const awayData = computed(() => {
  const {  result } = props

  return state.other.showAll ? result.awayData : result.awayData.slice(0, 3)
})
</script>
<style lang="scss" scoped>
.rq-match-result-item {
  flex: 1;
  position: relative;
  margin-right: 24px;
  padding-right: 24px;

  &:last-child {
    margin-right: 0;
    // padding-right: 0;
  }
  &:after {
    position: absolute;
    width: 1px;
    height: 70%;
    background-color: #ebebeb;
    top: 15%;
    right: 0;
    content: '';
  }

  &:last-child {
    &:after {
      display: none;
    }
  }
}

.rq-match-result-item__label {
  text-align: center;
  height: 44px;
  line-height: 44px;
  color: #778090;
}

.rq-match-result-item__value {
  flex: 1;
}

.team {
  display: flex;
  position: relative;

  .name {
    line-height: 44px;
    position: absolute;
    left: -170px;
    top: 0;
    padding-left: 24px;
  }
}

.home-data data {
  width: 100%;
  position: relative;
}

.odd {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
}
:deep(.odd-item) {
  flex: none;
  width: calc(33.3% - 4px);
  //   width: 80px;
  height: 48px;
  border: none;
  margin-right: 4px;
  margin-bottom: 4px;
}
</style>
